<template>
    <div class="app-container">
        <div class="contentB">
            <div class="inside">
                <div class="top-tab-view">
                    <div class="tab-item left-item" :class="leftTabs === '基本信息' ? 'tab-select-item' : 'tab-normal-item' "  @click="leftTabClick('基本信息')">
                        <img src="/static/img/baseinfo_icon.png" class="tab-icon">
                        基本信息
                    </div>
                    <div class="tab-item " :class="leftTabs === '修改密码' ? 'tab-select-item' : 'tab-normal-item' "  @click="leftTabClick('修改密码')">
                        <img src="/static/img/baseinfo_icon.png" class="tab-icon">
                        修改密码
                    </div>
                </div>
                <br>
                <br>
                <br>
                <el-row :gutter="5">
                    <el-col :span="12" ref="leftView">
                        <div v-show="leftTabs === '基本信息' && !showElectricFence">
                            <el-form :model="form" :rules="rules" ref="form" label-width="200px" class="demo-ruleForm">
                                <el-form-item label="用户姓名" prop="name">
                                    <el-input style="width: 400px"
                                              v-model.trim="form.name"
                                              placeholder="请输入用户姓名"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="性别" prop="sex">
                                    <el-select v-model="form.sex" style="width: 400px">
                                        <el-option
                                            v-for="item in sexList"
                                            :label="item"
                                            :value="item">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="联系电话" prop="phone">
                                    <el-input style="width: 400px"
                                              v-model.trim="form.phone"
                                              placeholder="请输入厂商名称"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="邮箱" prop="email">
                                    <el-input style="width: 400px"
                                              v-model.trim="form.email"
                                              placeholder="请输入联系电话"
                                    ></el-input>
                                </el-form-item>

            <!--                    <el-form-item label="二级分类" prop="subCategory">-->
            <!--                        <el-input style="width: 400px"-->
            <!--                                  v-model.trim="form.subCategory"-->
            <!--                                  show-word-limit placeholder="请输入二级分类"-->
            <!--                        ></el-input>-->
            <!--                    </el-form-item>-->

                                <el-form-item label="单位名称" prop="unitName" >
                                    <el-input style="width: 400px"
                                              v-model.trim="form.unitName"
                                              placeholder="请选择单位名称"
                                    ></el-input>
                                </el-form-item>

                                <el-form-item label="职务" prop="jobPosition">
                                    <el-input style="width: 400px"
                                              v-model.trim="form.jobPosition"
                                              placeholder="请输入职务"
                                    ></el-input>
                                </el-form-item>

                                <el-form-item>
                                    <div style="margin-top:20px;margin-left: 15%;">
                                        <el-row>
                                            <el-button type="info" style="margin-right:-200px" @click="unSubmit" round>
                                                取消
                                            </el-button>
                                            <el-button type="primary" @click="infoSubmit" round>
                                                保存
                                            </el-button>
                                        </el-row>
                                    </div>
                                </el-form-item>
                            </el-form>
                        </div>


                        <div v-show="leftTabs === '修改密码' && !showElectricFence">
                            <el-form :model="userInfo"  ref="userInfo" :rules="useRules" label-width="200px" class="demo-ruleForm">
                                <el-form-item label="登录名" prop="loginName">
                                    <el-input style="width: 400px"
                                              v-model.trim="userInfo.loginName"
                                              placeholder="请输入登录名"
                                              :disabled="disableName"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="password">
                                    <el-input style="width: 400px"
                                              v-model.trim="userInfo.password"
                                              placeholder="请输密码"
                                              :show-password="showPassWord"
                                    ></el-input>
                                </el-form-item>

                                <el-form-item label="确认密码" prop="secondPassword">
                                    <el-input style="width: 400px"
                                              v-model.trim="userInfo.secondPassword"
                                              placeholder="请输确认密码"
                                    ></el-input>
                                </el-form-item>

                                <el-form-item>
                                    <div style="margin-top:20px;margin-left: 15%;">
                                        <el-row>
                                            <el-button round  @click="leftTabClick('基本信息')">
                                                返回上一页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            </el-button>
                                            <el-button type="primary" @click="editUserPassWord" round>
                                                保存
                                            </el-button>
                                        </el-row>
                                    </div>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import uuid from '../../utils/uuid'
    import {queryVehicleList, updateVehicleInfo} from '../../api/vehicle'
    import {createTBoxInfo, queryTBoxInfo, updateTBoxInfo} from '../../api/tBox'
    import core from '../../utils/util'
    //import {queryPlatUser, queryplatUserInfo, updateplatUserInfo} from '../../api/platUser/platUser'
    import {login} from '../../api/login'
    export default {
        name: 'add',
        data(){
            return{
                leftTabs:'基本信息',
                createOrEdit:'create',
                showPassWord:true,
                form:{
                    uid:'',//
                    name: '',//用户姓名
                    sex: '',//性别
                    phone: '',//电话
                    email: '',//邮箱
                    loginName: '',//登录名
                    password: '',//密码
                    category: '',//分类：监管机构、企业人员
                    subCategory: '',//二级分类
                    unitName: '',//单位名称
                    jobPosition: '',//职务：
                    fileUid: '',//
                },

                userInfo :{
                    loginName: '',//登录名,
                    password: '',//密码,
                    secondPassword:'',
                },
                showElectricFence:false,
                disableName : true,
                uid:'',
                name:'',
                password: '',
                sexList: ["男", "女"],
                rules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                },

                useRules: {
                    loginName: [
                        { required: true, message: '请输入登录名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    secondPassword: [
                        { required: true, message: '请输入确认密码', trigger: 'blur' }
                    ],
                },
            }
        },
        methods:{
            goBackPage(){//返回上一页
                this.$router.go(-1)
            },

            topTabsClick(e){
                this.showElectricFence = false
            },

            leftTabClick(item){
                this.leftTabs = item
            },

            unSubmit(){
                this.goBackPage()
            },
            infoSubmit(){
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.updateInfo()
                    }
                })
            },

            editUserPassWord(){
                if(this.userInfo.loginName && this.userInfo.password && this.userInfo.secondPassword){
                    if(this.userInfo.password != this.userInfo.secondPassword){
                        this.$message.error("密码与确认密码不一致!")
                    }else{
                        this.editUserInfo()
                    }
                }else{
                    this.$message.error("请输入完整信息!")
                }
            },

            editUserInfo(){
                let param = {
                    uid : this.uid,
                    password : this.userInfo.password,
                    loginName : this.userInfo.loginName
                }
                const loading = this.$loading(this.Global.loadingOption);
                updateplatUserInfo(param).then(() => {
                    loading.close()
                    this.$notify({
                        title: '成功',
                        message: '修改成功',
                        type: 'success',
                        duration: 2000
                    })
                    this.logout()
                }).catch(error => {
                    loading.close()
                    console.log(error)
                })
            },

            logout(){
                this.$store.dispatch("FedLogOut");
                this.$message({
                    type: "success",
                    message: "退出成功!"
                });
                setTimeout(() => {
                    location.reload(); // 强制刷新
                }, 100);
            },

            updateInfo(){//修改
                let param = this.form
                const loading = this.$loading(this.Global.loadingOption);
                updateplatUserInfo(param).then(() => {
                    loading.close()
                    this.$notify({
                        title: '成功',
                        message: '修改成功',
                        type: 'success',
                        duration: 2000
                    })
                    this.getInfo(this.name,this.password)
                }).catch(error => {
                    loading.close()
                    console.log(error)
                })
            },

            getInfo(name,password){//查详情
                let param  = {
                    loginName : name,
                    pwssword : password
                }
                const loading = this.$loading(this.Global.loadingOption);
                queryPlatUser(param).then(response => {
                    loading.close()
                    if(response.data.data){
                        this.form = response.data.data
                        this.userInfo.loginName = response.data.data.loginName
                        this.userInfo.password = response.data.data.password
                        this.uid =  response.data.data.uid
                    }
                }).catch(error=>{
                    loading.close()
                    console.log(error)
                })
            },

        },

        created () {
            this.name = localStorage.getItem('username')
            this.password = localStorage.getItem('password')
            if(  this.name != null &&  this.name != '' &&  this.name != undefined ){
                if(  this.password != null &&  this.password != '' &&  this.password != undefined){
                    this.getInfo(this.name,this.password)
                }
            }
        }
    }
</script>

<style scoped lang="scss">

</style>
